<template>
	<el-main>
		<el-row :gutter="15">
			<el-col :lg="12">
				<el-card shadow="never" header="导入用户">
					<el-form :model="form" :rules="rules" ref="dialogForm"
							 label-width="110px"
							 label-position="left">
						<el-form-item label="选择单位" prop="company_id" clearable>
							<el-select v-model="form.company_id" filterable style="width: 100%" placeholder="请选择所属单位">
								<el-option v-for="item in companyList" :key="item.company_id" :label="item.company_name" :value="item.company_id"/>
							</el-select>
						</el-form-item>
						<el-form-item label="上传模板" prop="file">
							<el-input type="file" v-model="form.file" placeholder="请上传模板文件" ref="fileInput" @change="onFileChange"></el-input>
<!--							<div class="el-upload__tip" style=";">-->
<!--								<span class="color">支持Excel格式，单次最多支持下单1000条数据，如超过请分多次操作</span>-->
<!--							</div>-->
						</el-form-item>
						<el-form-item>
							<el-span style="color:red">{{importMsg}}</el-span>
						</el-form-item>
						<el-row style="float: right">
							<el-col :span="2">
								<el-form-item>
									<el-button type="primary" :loading="isSaveing" @click="submit()">确定导入</el-button>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-card>
			</el-col>
			<el-col :lg="12">
				<el-card shadow="never" header="导入结果">
					<el-tabs tab-position="top" ref="tabs" v-model="activeName" @tab-click="handleClick">
						<el-tab-pane label="导入成功" name="importsuccess">
							<el-table :data="successTableData" style="width: 100%" height="250">
								<el-table-column fixed prop="username" label="姓名" width="180"/>
								<el-table-column prop="mobile" label="手机号" width="180"/>
								<el-table-column prop="company_name" label="单位名称" width="180"/>
								<el-table-column prop="error" label="内容" width="180"/>
							</el-table>
						</el-tab-pane>
						<el-tab-pane label="导入失败" name="importfailed">
							<div class="right-panel" v-if="fiailedTableData.length>0">
								<el-button icon="el-icon-download" @click="downloadFailedData">下载失败数据
								</el-button>
							</div>
							<el-table :data="fiailedTableData" style="width: 100%" height="250">
								<el-table-column fixed prop="username" label="姓名" width="180"/>
								<el-table-column prop="mobile" label="手机号" width="180"/>
								<el-table-column prop="company_name" label="单位名称" width="180"/>
								<el-table-column prop="error" label="内容" width="180"/>
							</el-table>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>
<script>
	export default {
		name: 'user_import',
		components: {},
		data() {
			return {
				isSaveing: false,
				activeName: "importsuccess",
				form: {
					file: null,
					company_id: "",
				},
				companyList: [],
				//验证规则
				rules: {
					company_id: [
						{required: true, message: '请选择所属单位', trigger: 'change'}
					],
					file: [
						{required: true, message: '请上传导入文件', trigger: 'change'}
					]
				},
				successTableData: [],
				fiailedTableData: [],
				failedDownLoadUrl: "",
				importMsg: "",
			}
		},
		mounted() {
			//获取单位列表
			this.getCompanyList()
		},
		methods: {
			getCompanyList() {
				this.$API['company.company'].getCompanyList.get().then((res) => {
					if (res.code == 0) {
						this.companyList = res.data;
					}
				}).catch((msg) => {
					this.$alert(msg, "提示", {type: 'error'})
				})
			},
			onFileChange(e) {
				console.log(e);
				// this.form.file = e.target.files[0];
			},
			submit() {
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						const fileInput = this.$refs.fileInput.$el.querySelector('input[type=file]')
						const file = fileInput.files[0]
						const formData = new FormData()
						formData.append('company_id', this.form.company_id)
						formData.append('file', file)
						let config = {
							headers: {'Content_type': 'multipart/form-data'},
						}
						this.isSaveing = true;
						console.log('------------', formData, this.form)
						this.$API['user.user'].import.post(formData, config)
							.then((res) => {
								if (res.code == 0) {
									this.successTableData = res.data['success_data'];
									this.fiailedTableData = res.data['failed_data'];
									if (res.data['failed_data'].length > 0) {
										this.activeName = 'importfailed';
									}
									this.failedDownLoadUrl = res.data['download_url'];
									this.importMsg = res.msg;
									this.$emit('success', this.form, this.mode)
									this.$message.success("操作成功")
								} else {
									this.$alert(res.message, "提示", {type: 'error'})
								}
							})
							.catch((msg) => {
								this.$alert(msg, "提示", {type: 'error'})
							})
							.finally(() => {
								this.isSaveing = false;
							});
					} else {
						return false;
					}
				})
			},
			downloadFailedData() {
				window.open(this.failedDownLoadUrl);
			},
		}
	}
</script>

<style>
</style>
